<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col el-col :span="4" :xs="24" v-loading="loadingTree">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="filterName"></el-input>
        <el-tree class="filter-tree" :data="treedata" :props="defaultProps" default-expand-all :filter-node-method="filterNode" @node-click="treeClick" ref="tree"></el-tree>
      </el-col>
      <el-col el-col :span="20" :xs="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="心率" name="first"></el-tab-pane>
          <el-tab-pane label="血压" name="second"></el-tab-pane>
          <el-tab-pane label="体温" name="third"></el-tab-pane>
        </el-tabs>
        <div>
          <el-row :gutter="20">
            <el-col el-col :span="10" :xs="24">
              <div id="xinlvbiao" v-if="isxinlv">
                <el-table  v-loading="tableloading" element-loading-text="请点击左侧列表选择要展示设备详情" element-loading-spinner="el-icon-loading" :data="equipmentList" max-height="500px" align="center">
                  <el-table-column prop="imei_sn" label="设备id"></el-table-column>
                  <el-table-column prop="heart_rate" label="心率检测值"></el-table-column>
                  <el-table-column prop="created" label="检测时间"></el-table-column>
                </el-table>
              </div>
              <div v-if="isxueya">
                <el-table  v-loading="tableloading" element-loading-text="请点击左侧列表选择要展示设备详情" element-loading-spinner="el-icon-loading" :data="equipmentList" max-height="500px" align="center">
                  <el-table-column prop="imei_sn" label="设备id"></el-table-column>
                  <el-table-column prop="max_rate" label="高压检测值"></el-table-column>
                  <el-table-column prop="min_rate" label="低压检测值"></el-table-column>
                  <el-table-column prop="created" label="检测时间"></el-table-column>
                </el-table>
              </div>
              <div id="xinlvbiao" v-if="istiwen">
                <el-table  v-loading="tableloading" element-loading-text="请点击左侧列表选择要展示设备详情" element-loading-spinner="el-icon-loading" :data="equipmentList" max-height="500px" align="center">
                  <el-table-column prop="imei_sn" label="设备id"></el-table-column>
                  <el-table-column prop="temperature" label="体温检测值"></el-table-column>
                  <el-table-column prop="created" label="检测时间"></el-table-column>
                </el-table>
              </div>
              <pagination v-show="xinlvtotal>0" :total="xinlvtotal" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
            </el-col>
            <el-col el-col :span="14" :xs="24">
              <div id="tubiaoDetail"></div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAllSheBeiList, gethearthistory,getbloodhistory,gettiwenhistory } from "@/api/bracelet/equipment";
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.echt()
  },
  created() {
    this.getuserList()
  },
  data () {
    return {
      filterText:'',
      activeName: 'first',
      loadingTree: true,
      tableloading: true,
      xinlvtotal: 0,
      showtitle: '',
      isxinlv: true,
      isxueya: false,
      istiwen: false,
      equipmentList: [],
      //当前正在使用的设备id，便于切换
      showimei_sn: '',
      // 查询参数
      queryParams: {
        imei_sn: 'null',
        limit: 10,
        page: 1
      },
      treedata:[
        {
          id: 1,
          label: '一级 1'
        }, {
          id: 2,
          label: '一级 2'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab.label);
      this.showtitle = tab.label
      this.tableloading = true
      if(tab.label == "心率") {
        this.isxinlv = true;
        this.isxueya = false;
        this.istiwen = false
        this.showhearthistory()
      }else if(tab.label == "血压") {
        this.isxinlv = false;
        this.isxueya = true;
        this.istiwen = false
        this.showloodhistory()
      }else if(tab.label == "体温"){
        this.istiwen = true;
        this.isxinlv = false;
        this.isxueya = false;
        this.showtiwenhistory()
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    echt() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('tubiaoDetail'));
      // 绘制图表
      var option = {
        title: {
          text: '暂无数据',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: 16
          }
        },
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        dataZoom:[{
          type:"inside"//缩放
        }],
        series: [{
          data: [],
          type: 'line',
          itemStyle : { normal: {label : {show: true}}}
        }]
      };
      var option1 = {
        title: {
          text: '暂无数据',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: 16
          }
        }
      }
      myChart.setOption(option)
    },
    getArr(obj) {
      var arr=[];
      for (var i=0;i<obj.length;i++) {
        var objarr={};
        objarr.id = i;
        objarr.imei_sn = obj[i].imei_sn;
        objarr.label = obj[i].truename ? obj[i].truename : '--';
        arr[i] = objarr;
      }
      return arr;
    },
    getuserList() {
      getAllSheBeiList().then(response => {
        var arr=this.getArr(response.data)
        this.treedata = arr;
        this.loadingTree = false;
      }).catch(function(error) {
        console.log(error);
      });
    },
    treeClick(data,node,tree) {
      //点击左侧树，展开详情
      this.queryParams.imei_sn = data.imei_sn;
      this.showimei_sn = data.imei_sn;
      //展示详情列表
      //this.showhearthistory()
      if(this.activeName == "first") {
        //心率
        this.showhearthistory()
      }else if(this.activeName == "second") {
        //血压
        this.showloodhistory()
      }else{
        this.showtiwenhistory()
      }
    },
    showhearthistory() {
      gethearthistory(this.queryParams).then(response => {
        this.equipmentList = response.rows
        this.tableloading = false
        this.xinlvtotal = response.total
        this.showEchats(response.rows,"心率")
        // console.log(response);
      }).catch(function(error) {
        console.log(error);
      });
    },
    showloodhistory() {
      getbloodhistory(this.queryParams).then(response => {
        this.equipmentList = response.rows
        this.tableloading = false
        this.xinlvtotal = response.total
        this.showEchats(response.rows,"血压")
        // console.log(response);
      }).catch(function(error) {
        console.log(error);
      });
    },
    showtiwenhistory() {
      gettiwenhistory(this.queryParams).then(response => {
        this.equipmentList = response.rows
        this.tableloading = false
        this.xinlvtotal = response.total
        this.showEchats(response.rows,"体温")
        // console.log(response);
      }).catch(function(error) {
        console.log(error);
      });
    },
    getList() {
      if(this.activeName == "first") {
        //心率
        this.showhearthistory()
      }else if(this.activeName == "second") {
        //血压
        this.showloodhistory()
      }else if(this.activeName == "third"){
        this.showtiwenhistory()
      }
    },
    showEchats(rows,title) {
      var xdata=[]
      var ydata=[]
      var ydata1=[]
      if(title == "心率"){
        for(var i=0;i<rows.length;i++) {
          xdata.push(rows[i].created)
          ydata.push(rows[i].heart_rate)
        }
      }else if(title == "血压") {
        for(var i=0;i<rows.length;i++) {
          xdata.push(rows[i].created)
          ydata.push(rows[i].max_rate)
          ydata1.push(rows[i].min_rate)
        }
      }else if(title == "体温"){
        for(var i=0;i<rows.length;i++) {
          xdata.push(rows[i].created)
          ydata.push(rows[i].temperature)
        }
      }
      // for(var i=0;i<rows.length;i++) {
      //   xdata.push(rows[i].created)
      //   ydata.push(rows[i].heart_rate)
      // }
      this.$echarts.init(document.getElementById('tubiaoDetail')).dispose();
      var myChart = this.$echarts.init(document.getElementById('tubiaoDetail'))
      var option = {
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function (params) {
            var showContent = '<p>'+title+'检测值为：'+params[0].value + '</p><p>检测时间：' + params[0].axisValue+'</p>';
            return showContent
            // console.log(params);
          }
        },
        xAxis: {
          type: 'category',
          data: xdata
        },
        yAxis: {
          type: 'value'
        },
        dataZoom:[{
          type:"inside"//缩放
        }],
        series: [{
          data: ydata,
          type: 'line',
          itemStyle : { normal: {label : {show: true}}}
        },
        ]
      };
      var option1 = {
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function (params) {
            var showContent = '<p>'+title+'检测值为：'+params[0].value + '</p><p>检测时间：' + params[0].axisValue+'</p>';
            return showContent
            // console.log(params);
          }
        },
        xAxis: {
          type: 'category',
          data: xdata
        },
        yAxis: {
          type: 'value'
        },
        dataZoom:[{
          type:"inside"//缩放
        }],
        series: [{
          data: ydata,
          type: 'line',
          itemStyle : { normal: {label : {show: true}}}
        },
        {
          data: ydata1,
          type: 'line',
          itemStyle : { normal: {label : {show: true}}}
        }]
      };
      if(title == "心率"){
        myChart.setOption(option)
      }else if(title == "血压") {
        myChart.setOption(option1)
      }else if(title == "体温") {
        myChart.setOption(option)
      }
    }
  }
}
</script>

<style>
#tubiaoDetail{
  width: 100%;
  height: 600px;
}
.filterName{
  padding-bottom: 10px;
}
</style>